<template>
  <div>
    <headerMiddle title="编辑资料" />
    <div class="avatar">
      <img class="avatar_img" :src="profile.head_img" alt />
      <van-uploader :after-read="afterRead" class="fileUploader" />
    </div>
    <cellBar label="昵称" :desc="profile.nickname" @jump="isShowNickname=true" />

    <cellBar label="密码" desc="***" @jump="isShowPwd=true" />

    <cellBar label="性别" :desc="profile.gender" @jump="isShowGender = true" />

    <van-dialog
      v-model="isShowNickname"
      title="编辑昵称"
      show-cancel-button
      @confirm="editProfile({nickname:newnickname})"
    >
      <van-field v-model="newnickname" placeholder="请输入昵称" />
    </van-dialog>

    <van-dialog
      v-model="isShowPwd"
      title="编辑密码"
      show-cancel-button
      @confirm="editProfile({password: newPwd})"
    >
      <van-field type="password" v-model="newPwd" placeholder="请输入密码" />
    </van-dialog>

    <van-action-sheet
      v-model="isShowGender"
      :actions="genderList"
      @select="selectGender"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import headerMiddle from "../components/headerMiddle";
import cellBar from "../components/cellBar";
export default {
  components: {
    headerMiddle,
    cellBar
  },
  data() {
    return {
      isShowNickname: false,
      isShowPwd: false,
      isShowGender: false,
      newnickname: "",
      newPwd: "",
      genderList: [
        {
          name: "男"
        },
        {
          name: "女"
        }
      ],
      profile: {}
    };
  },
  mounted() {
    this.loadPage();
  },

  methods: {
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("user_id"),
        method: "get",
        headers: {
          Authorization: localStorage.getItem("token")
        }
      }).then(res => {
        this.profile = res.data.data;
        if (!this.profile.head_img) {
          this.profile.head_img = "/static/imgs/11.png";
        } else {
          // 如果有头像数据,我们还要拼接数据库基准路径才能获取到头像真正地址
          this.profile.head_img= this.$axios.defaults.baseURL + this.profile.head_img
        }
        this.profile.gender = this.profile.gender == 1 ? "男" : "女";
      });
    },
    editProfile(newData) {
      this.$axios({
        //   user_id 应该从我们的 localStorage 里面获取
        url: "/user_update/" + localStorage.getItem("user_id"),
        method: "post",
       
        data: newData
      }).then(res => {
        console.log(res.data);
        this.loadPage();
      });
    },
    selectGender(item) {
      console.log(item.name);
      this.editProfile({
        gender: item.name == "男" ? 1 : 0
      });
      // 选完就关掉
      this.isShowGender = false;
    },
    afterRead(fileItem) {
      // 我们使用一个对象 FormData 将数据转换为二进制形式
      const data = new FormData();
      // 拿到的图片放入这个二进制对象的 file 字段里面
      data.append("file", fileItem.file);

      this.$axios({
        url: "/upload",
        method: "post",
        data: data,
       
      }).then(res => {
        //   调用 editProfile 方法 修改 head_img
        // 图片地址在 res.data.data.url
        this.editProfile({
          head_img: res.data.data.url
        });
      });
    }
  }
};
</script>

<style lang='less' scoped>
.avatar {
  padding: 8.333vw;
  text-align: center;
  position: relative;
}
.avatar_img {
  width: 19.444vw;
  height: 19.444vw;
  border-radius: 50%;
}
.fileUploader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}
</style>